<template>
  <view class="container">
	  
    <view class="containertop"  :style="{ 'margin-top': getnavbarheightdata + 'rpx'}">
		<uni-nav-bar shadow left-icon="left" right-icon="contact" leftText="返回"  :title="friendnickname" @clickLeft="clickleftnavbar" @clickRight="clickrightnavbar" @headerheight="headerheight"/>
    </view>
	<view class="">
		<image class="frienddetailimg" :src="`${baseurl}/${backimg}`" mode="aspectFill"></image>
	</view>
		<!-- 聊天页面开发 :scroll-into-view="newMessage"-->
		<scroll-view class="chat" scroll-y="true" scroll-with-animation="true"  :scroll-top="scrollTop" @scrolltoupper="scrolltoupperfunct()"  :style="{ 'padding-bottom': getheightelement + 'px' }" >	
				
				<view class="" v-for="(item,index) in handlemessages.reverse()"  :id="'element_'+index"  :key="item.id">
					<!-- 左边聊天框: -->
					<view class="" v-if=" userInfo.id != item.userID" :key="item.messageid">
						<view class="time">
							{{item.formattedTime}}
						</view>
						<view class="left" >
							<!-- 左边头像 -->
							<view class="leftimg">
								<image class="img" :src="`${baseurl}${item.imgUrl}`" mode="aspectFill"></image>
							</view>
							<view class="leftcontent" v-if="item.types == 0">
								<view class="conttex">
									{{item.message}}
								</view>
							</view>
							<!-- 左边图片 -->
							<view class="leftcontent"  v-else-if="item.types == 1" >
								<image class="img" @tap="getphoto(`${baseurl}${item.message}`)" :src="`${baseurl}${item.message}`" mode=""></image>
							</view>
							<!-- 音频 动态展示长度-->
							<view class="leftcontent" v-else-if="item.types == 2">
								
								<view class="videolight">
									<view class="">
										33"
									</view>
									<image class="videoimg" src="@/static/tabBar/chatbox/videolength.png" mode="aspectFill"></image>
									
								</view>
							</view>
							<!-- h5地图 -->
							<view class="leftcontent" v-else-if="item.types == 3">
								<!-- #ifdef H5 -->
									<view class="mapcontent">
										<view class="maptitle">
											{{JSON.parse(item.message).name}}
										</view>
										<view class="mapdetail">
											{{JSON.parse(item.message).address}}
										</view>
										<view class="">
											<map class="mapcomtent" :latitude="JSON.parse(item.message).latitude" :longitude="JSON.parse(item.message).longitude" :markers="covers(JSON.parse(item.message))" @tap="opmapdetail(JSON.parse(item.message))"></map>
										</view>
									</view>
								<!-- #endif -->
								<!-- #ifdef APP -->
									<!-- 安卓地图: -->
										<view class="mapcontent">
											<view class="maptitle">
												{{JSON.parse(item.message).name}}
												
											</view>
											<view class="mapdetail">
												{{JSON.parse(item.message).address}}
											</view>
											<view class="">
												<image class="mapcontentimg" src="@/static/img/1706008879317.jpg" mode="aspectFill" @tap="opmapdetail(JSON.parse(item.message))"></image>
											</view>
										</view>
								<!-- #endif -->
							</view>	
							
						</view>
					</view>
					<!-- 右边区域聊天: -->
					<view class=""  v-else>
						<view class="time">
							{{item.formattedTime}}
						</view>
						<view class="right" >
							<view class="rightcontent" v-if="item.types == 0">
								<view class="conttex">
									{{item.message}}
								</view>
							</view>
							<view class="rightcontent"  v-else-if="item.types == 1">
								<image class="img" @tap="getphoto(`${baseurl}${item.message}`)" :src="`${baseurl}${item.message}`" mode=""></image>
							</view>
							<!-- 音频 动态展示长度-->
							<view class="rightcontent" v-else-if="item.types == 2" @tap="playVoice(`${baseurl}${item.message}`)">
								
								<view class="videolight">
									<view class="">
										33"
									</view>
									<image class="videoimg" src="@/static/tabBar/chatbox/videolength.png" mode="aspectFill"></image>
									
								</view>
							</view>
							<!-- h5地图 -->
							<view class="rightcontent" v-else-if="item.types == 3">
								
								<!-- #ifdef H5 -->
									<view class="mapcontent">
										<view class="maptitle">
											{{JSON.parse(item.message).name}}
										</view>
										<view class="mapdetail">
											{{JSON.parse(item.message).address}}
										</view>
										<view class="">
											<map class="mapcomtent" :latitude="JSON.parse(item.message).latitude" :longitude="JSON.parse(item.message).longitude" :markers="covers(JSON.parse(item.message))" @tap="opmapdetail(JSON.parse(item.message))"></map>
										</view>
									</view>
								<!-- #endif -->
								<!-- #ifdef APP -->
									<!-- 安卓地图: -->
										<view class="mapcontent">
											<view class="maptitle">
												{{JSON.parse(item.message).name}}
												
											</view>
											<view class="mapdetail">
												{{JSON.parse(item.message).address}}
											</view>
											<view class="">
												<image class="mapcontentimg" src="@/static/img/1706008879317.jpg" mode="aspectFill" @tap="opmapdetail(JSON.parse(item.message))"></image>
											</view>
										</view>
								<!-- #endif -->
								
							</view>
							
							<!-- 头像区域 -->
							<view class="rightimg">
								<image class="img" :src="`${baseurl}${userInfo.imgUrl}`" mode=""></image>
							</view>
						</view>
					</view>
				</view>
		</scroll-view>

	<!-- 底部chatbox开发 -->
	<chatbottom @getheightbottom="getheightbottom" @gettime="gettime" @getmasklayer="getmasklayer" :getfrienddetailid="getgroupid"></chatbottom>
	<!-- 录音遮罩层 -->
	<view class="maskback" v-show="masklayer" :style="{'bottom':getheightbottom+'rpx'}">
		<view class="">
			<view class="centerwrite">
				<view class="centeryellow"> 
					{{gettimedata}}"
				</view>
				<image src="@/static/tabBar/chatbox/videolength.gif" mode=""></image>
			</view>
		</view>
		<view class="bottomall">
			<view class="bottomred">
				<image class="img" src="@/static/tabBar/chatbox/error.png" mode=""></image>
			</view>
			
		</view>
		<view class="bottomtext">
			上滑取消录音
		</view>
	</view>
  </view>
</template>

<script>

import $http from "@/common/api/request.js"
import {mapMutations,mapState} from 'vuex'
import chatbottom from '@/components/groupchatbottom/index.vue'
import 'intl';
import 'intl/locale-data/jsonp/zh';
import _ from 'lodash';
export default {
  data() {
    return {
	  backimg:"",
      messages: [],newMessage: "",
	  getheightelement:0,//高度
      getfrienddetailid:0,
	  baseurl:"https://zyc618.mynatapp.cc",
	  gettimedata:0,//获取子组件传过来的时间占比
	  masklayer:false,//语音遮罩层控制变量
	  getchatbottomheightdata:0,//获取底部高度,动态展示遮罩层
	  locationdata:{},//存放定位4个数据name..
	  page:1,//分页器参数
	  scrollTop:5,//分页器参数
	  throttleTimer:null,
	  totalPages:0,//分页器参数
	  friimgpath:"",
	  friendnickname:"",
	  tosolvetye:0,
	  getnavbarheightdata:0,//头部组件的高度
	  getgroupid:-1//群号
    };
  },
  methods: {
	//获取qun消息
    getmessagelist(groupidindex){
		$http.request({
					url: "/index/getgroupmessagelist",
					method: "POST",
					data: {
						groupid: groupidindex,
						page:this.page
					}
				}).then((res) => {
					
					if(res.code == 200){
						this.messages =res.data.message;
						this.totalPages = res.data.totalPages;
						
					}else{
						uni.showToast({
							title:"异常",
							during:2500,
							mask:true,
							icon:"error"
						})
					}
					
				}).catch((err) => {
					console.log(err);
				})
				
	},
	getphoto(photoimg){
		uni.previewImage({
			urls:[photoimg]
		})
	},
	//处理时间函数:
	parseChineseDate(dateStr) {
	      const [, year, month, day, hours, minutes] = dateStr.match(/(\d{4})年(\d{2})月(\d{2})日(\d{2}):(\d{2})/);
	      return new Date(`${year}/${month}/${day} ${hours}:${minutes}`);
	    },
	isSameDay(date1, date2) {
	  return (
		date1.getDate() === date2.getDate() &&
		date1.getMonth() === date2.getMonth() &&
		date1.getFullYear() === date2.getFullYear()
	  );
	},
	isYesterday(date1, date2) {
	  const yesterday = new Date(date1);
	  yesterday.setDate(date1.getDate() - 1);

	  return (
		yesterday.getDate() === date2.getDate() &&
		yesterday.getMonth() === date2.getMonth() &&
		yesterday.getFullYear() === date2.getFullYear()
	  );
	},
	isSameYear(date1, date2) {
	  return date1.getFullYear() === date2.getFullYear();
	},
	isValidDate(date) {
	  return !isNaN(date.getTime());
	},
	formatTime(date) {
	  const options = { hour: '2-digit', minute: '2-digit' };
	  return new Intl.DateTimeFormat('zh-CN', options).format(date);
	},
	formatSameYearDate(date) {
	  const options = { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' };
	  return new Intl.DateTimeFormat('zh-CN', options).format(date);
	},
	getheightbottom(heighttotle){
		this.getheightelement = heighttotle;
	},
	// 获取录音时长time控制宽度
	gettime(gettimedata){
		this.gettimedata = gettimedata
	},
	//语音遮罩层控制变量
	getmasklayer(masklayer){
		this.masklayer = masklayer
	},

	//安卓地图组件map配置
	covers(item){
		return [{latitude:item.latitude,longitude:item.longitude,iconPath:"../../static/tabBar/listtop_3.png"}]
	},
	//位置导航详细地址函数回调
	opmapdetail(item){
		uni.openLocation({
			latitude: item.latitude,
			longitude: item.longitude,
			success: function () {
				console.log('success');
			}
		});
		
	},
	//滚动框拉到顶部的函数
	scrolltoupperfunct() {
	      if (this.throttleTimer) return;
		  this.page+=1;
		  if(this.page > this.totalPages){
			  uni.showToast({
			  	title:"没有更多消息",
				icon:"none",
				duration:1500,
				mask:true
			  })
		  }else{
			  //页数加一:
			  this.throttleTimer = setTimeout(() => {
			      // 处理逻辑:
			  		$http.request({
						url: "/index/getgroupmessagelist",
						method: "POST",
						data: {
							groupid: this.groupidindex,
							page:this.page
						}
						}).then((res) => {
							if(res.code == 200){
								res.data.message.forEach(item=>{
									this.messages.push(item)
								})
								
							}else{
								uni.showToast({
									title:"空~",
									during:1500,
									mask:true,
									icon:"none"
								})
							}
						}).catch((err) => {
							console.log(err);
						})
					this.throttleTimer = null;
			  }, 1500);
		  }
	    
	},
	
	
	//点击左边navbar
	clickleftnavbar(){
		uni.navigateBack({
			delta:1
		})
	},
	//点击右边navbar
	clickrightnavbar(){
		alert("clickrightnavbar")
	},
	//时间生成
	formatDateTime(date) {
	    const year = date.getFullYear();
	    const month = (date.getMonth() + 1).toString().padStart(2, '0');
	    const day = date.getDate().toString().padStart(2, '0');
	    const hours = date.getHours().toString().padStart(2, '0');
	    const minutes = date.getMinutes().toString().padStart(2, '0');
		const seconds = date.getSeconds().toString().padStart(2, '0');
	    return `${year}年${month}月${day}日${hours}:${minutes}:${seconds}`;
	},
	// 防抖unshift事件处理函数:
	handleDebouncedClick: _.debounce(function (datamessage) {
		this.messages.unshift(datamessage);
		console.log(111);
		console.log(this.messages);
	}, 1000),
	// 防抖unshift事件处理函数:
	handlethealldatamessage: _.debounce(function (datamessage) {
		this.messages.unshift(datamessage);
		console.log(222);
		console.log(this.messages);
	}, 1000),
	//聊天数据发送后端:
	sendSocket(e){
		this.socket.emit('groupmsg',e,this.userInfo.id,this.getgroupid,this.tosolvetye,this.userInfo.imgUrl)
	},
	
	//socket后端返回的数据接收:fromid用户发送:  接收方
	receiveSocketMsg(type) {
		this.socket.on('logingroup', (newUserId) => {
		      
			  uni.showToast({
			  	title:`${newUserId} joined the group`,
				icon:"none"
			  })
		    });
	  this.socket.on("groupmsg",(msg,fromid,tosolvetye,imgUrl)=>{
		  if(tosolvetye == 1){//图片为1
			  let datamessage={
			  	userID:fromid,//fromid谁发的
			  	imgUrl:`${imgUrl}`,//先写自己的头像
			  	message:JSON.parse(msg),
			  	types:1,//
			  	time:this.formatDateTime(new Date()),
			  	
			  };
			  this.handleDebouncedClick(datamessage)
		  }else if(tosolvetye == 0){//文字为0
			  let datamessage={
			  	userID:fromid,//?
			  	imgUrl:`${imgUrl}`,//先写自己的头像
			  	message:JSON.parse(msg),
			  	types:0,//
			  	time:this.formatDateTime(new Date()),
			  	
			  };
			  
			  this.handleDebouncedClick(datamessage)
			  
		  }else if(tosolvetye == 2){//2为语音信息
			  let datamessage={
			  	userID:fromid,//?
			  	imgUrl:`${imgUrl}`,//先写自己的头像
			  	message:JSON.parse(msg),
			  	types:2,//
			  	time:this.formatDateTime(new Date()),
			  	
			  };
			  this.handleDebouncedClick(datamessage)
		  }else{//3为地址信息
			  let datamessage={
			  	userID:fromid,//?
			  	imgUrl:`${imgUrl}`,//先写自己的头像
			  	message:JSON.parse(msg),
			  	types:3,//
			  	time:this.formatDateTime(new Date()),
			  	
			  };
			  this.handleDebouncedClick(datamessage)
		  }
		
	  })
		
	},
	//类型模板函数:
	thealldatamessage(type,data){
		this.tosolvetye=type;
		this.sendSocket(data);//后台socket回调
		this.receiveSocketMsg(type);
		//这是发送方
		// if(type == 0){
		// 	let datamessage={//字符串组:
		// 	userID:this.userInfo.id,//?
		// 	imgurl:`${this.baseurl}${this.userInfo.imgUrl}`,//先写自己的头像
		// 	message:JSON.parse(data),
		// 	types:type,//
		// 	time:this.formatDateTime(new Date()),
		// 	id:String(new Date().getTime()) + String(Math.floor(Math.random() * 1000)),
		// 	};
		// 	this.messages.unshift(datamessage);
			
		// }else if(type == 1){//图片:
		// 	let datamessage={
		// 	userID:this.userInfo.id,//?
		// 	imgurl:`${this.baseurl}${this.userInfo.imgUrl}`,//先写自己的头像
		// 	message:JSON.parse(data),
		// 	types:type,//
		// 	time:this.formatDateTime(new Date()),
		// 	id:String(new Date().getTime()) + String(Math.floor(Math.random() * 1000)),
		// 	}
		// 	this.messages.unshift(datamessage);
		// }else if(type == 2){//音频:
		// 	let datamessage={
		// 	userID:this.userInfo.id,//?
		// 	imgurl:`${this.baseurl}${this.userInfo.imgUrl}`,//先写自己的头像
		// 	message:JSON.parse(data),
		// 	types:type,//
		// 	time:this.formatDateTime(new Date()),
		// 	id:String(new Date().getTime()) + String(Math.floor(Math.random() * 1000)),
		// 	}
		// 	this.messages.unshift(datamessage);
		// }else if(type == 3)//定位
		// {
		// 	let datamessage={
		// 	userID:this.userInfo.id,//?
		// 	imgurl:`${this.baseurl}${this.userInfo.imgUrl}`,//先写自己的头像
		// 	message:data,
		// 	types:type,//
		// 	time:this.formatDateTime(new Date()),
		// 	id:String(new Date().getTime()) + String(Math.floor(Math.random() * 1000)),
		// 	}
		// 	this.messages.unshift(datamessage);
		// }
	},
	//播放按钮
	playVoice(voicePath) {
		let innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.autoplay = true;
		innerAudioContext.src = voicePath;
		innerAudioContext.onPlay(() => {
		  console.log('开始播放');
		});
	},
	//获取高度:
	headerheight(heig){
		this.getnavbarheightdata = heig;
		
	},
	//``````事件总线函数
	getstringmsg(){
		  uni.$on('get_stringmsg',data=>{
			 this.thealldatamessage(0,data)
		  })
	},
	getphotomsg(){
		  uni.$on('get_filepaths',data=>{
			 this.thealldatamessage(1,data)
			})
	},
	getMP3msg(){
		  uni.$on('get_MP3msg',data=>{
			 this.thealldatamessage(2,data)
			})
	},
	//定位:
	getlocation(){
		uni.$on('get_locationdetail',(data)=>{
			
			this.thealldatamessage(3,data)
		})
	},
	//``````事件总线函数
	
  },
  onLoad(e) {
		this.receiveSocketMsg();//上来先触发一次,防止第一次无效
		if(e.hasOwnProperty('name','groupid')){
			this.friendnickname = e.name;//群名字
			this.getgroupid = e.groupid;//获取群id
			this.getmessagelist(e.groupid);//分页器获取群聊天记录
			this.backimg = e.backimg;//群背景
			this.socket.emit('logingroup',e.groupid,this.userInfo.id);
		}else{
			uni.showToast({
				title:"不明操作"
			})
		}
  },
  mounted() {
  	
  },
  components:{
	  chatbottom
  },
  computed:{
	  ...mapState({
	  	userInfo:state=>state.user.userInfo
	  }),
	  
		handlemessages(){
			const currentDate = new Date();
			return this.messages.map(item => {
				   // 复制对象，保留其他属性不变
				   const newItem = { ...item };
				 
				   const inputDateTime = this.parseChineseDate(item.time);
				 
				   // 检查日期字符串是否有效
				   if (this.isValidDate(inputDateTime)) {
					 // 仅当日期为今天时返回 "10:33"
					 if (this.isSameDay(currentDate, inputDateTime)) {
					   newItem.formattedTime = this.formatTime(inputDateTime);
					 }
					 // 仅当日期为昨天时返回 "昨天10:33"
					 else if (this.isYesterday(currentDate, inputDateTime)) {
					   newItem.formattedTime = '昨天' + this.formatTime(inputDateTime);
					 }
					 // 仅当日期为同一年时返回 "01月20日10:33"
					 else if (this.isSameYear(currentDate, inputDateTime)) {
					   newItem.formattedTime = this.formatSameYearDate(inputDateTime);
					 }
					 // 非本年的消息保持 time 属性不变
					 else {
					   newItem.formattedTime = item.time;
					 }
				   }
				 
				   return newItem;
				 });
		}
  },
  //用于事件总线的 上来并不会就触发 只有总线被触发后才会触发
  created() {
	  //0文字1图片2音频
	  //事件总线:获取地图详细坐标:
      this.getlocation()
	  //获取输入框内容:
	  this.getstringmsg();
	  //获取文件地址:
	  this.getphotomsg();
	  //获取音频地址:
	  this.getMP3msg();
  },
  watch: {
      messages() {
        // 当 elements 数据更新时，重新计算最后一个元素的 id
        this.newMessage = 'element_' + (this.messages.length - 1);
		
      }
    }
};
</script>

<style lang="scss" scoped>
	.time{
		text-align: center;
		margin: 15rpx 0;
		font-size: $uni-font-size-sm;
		background-color: rgba(255, 255, 255, 0.05);
		
	}
	.container{
		
		position: relative;
		.containertop{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			
			z-index: 999;
		}
	}
	.chat{
		padding-top: 120rpx;
		height: 80vh;
	}
.left{
	display: flex;
	justify-content: start;
	align-items: flex-start;	
	margin-right: 10%;
	flex-wrap: wrap; /* 允许内容自动换行 */
	.leftimg{
		width: 90rpx;
		height: 90rpx;
		border-radius: $uni-border-radius-base;
		overflow: hidden;
		margin:0 10rpx 0 5rpx; /* 头像和内容之间的间距 */
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.leftcontent{
		max-width: 480rpx;
		z-index: 0;
		.conttex{
			line-height: 50rpx;
			
			padding:10rpx 25rpx 15rpx 20rpx;
			border-radius: 0rpx 20rpx 20rpx 20rpx;
			background-color: #fff;
			font-size: $uni-font-size-base;
		}
		.img{
			width: 300rpx;
			max-height: 300rpx;
			min-height: 200rpx;
		}
		.videolight{
			max-width: 280rpx;
			min-width: 30rpx;
			height: 50rpx;
			display: flex;
			justify-content: end;
			align-items: center;
			line-height: 50rpx;
			padding:10rpx 25rpx 10rpx 20rpx;
			border-radius: 0rpx 20rpx 20rpx 20rpx;
			background-color: #fff;
			.videoimg{
				width: 60rpx;
				height: 40rpx;
				margin-left: 15rpx;
			}
		}
		.mapcontent{
			background-color: #fff;
			padding: 10rpx 10rpx;
			.maptitle{
				font-size: $uni-font-size-lg;
				padding: 0rpx 15rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				
			}
			.mapdetail{
				font-size: $uni-font-size-sm;
				padding: 0rpx 15rpx;
				color: $uni-text-color-placeholder;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.mapcontentimg{
				width: 100%;
				height: 200rpx;
			}
		}
	}
}
.right{
	display: flex;
	justify-content: end;
	margin-left: 10%;
    flex-wrap: wrap; /* 允许内容自动换行 */
	align-items: flex-start;	
	.rightimg{
		width: 90rpx;
		height: 90rpx;
		border-radius: $uni-border-radius-base;
		overflow: hidden;
		margin:0 10rpx 0 5rpx; /* 头像和内容之间的间距 */
		.img{
			width: 100%;
			height: 100%;
		}
	}
	.rightcontent{
		margin: 1% 1% 0 0;
		max-width: 480rpx;
		z-index: 0;
		
		.conttex{
			background-color: #a1e96f;
			line-height: 50rpx;
			padding:10rpx 20rpx 15rpx 25rpx;
			border-radius: 20rpx 0 20rpx 20rpx;
			font-size: $uni-font-size-base;
		}
		.img{
			width: 300rpx;
			max-height: 300rpx;
			min-height: 100rpx;
		}
		.videolight{
			max-width: 280rpx;
			min-width: 30rpx;
			height: 50rpx;
			display: flex;
			justify-content: end;
			align-items: center;
			background-color: #1d9c34;
			line-height: 50rpx;
			padding:10rpx 25rpx 10rpx 20rpx;
			border-radius: 20rpx 0 20rpx 20rpx;
			color: #fff;
			.videoimg{
				width: 60rpx;
				height: 40rpx;
				margin-left: 15rpx;
			}
		}
		.mapcontent{
			background-color: #a1e96f;
			padding: 10rpx 10rpx;
			.maptitle{
				font-size: $uni-font-size-lg;
				padding: 0rpx 15rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				
			}
			.mapdetail{
				font-size: $uni-font-size-sm;
				padding: 0rpx 15rpx;
				color: $uni-text-color-placeholder;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
			.mapcontentimg{
				width: 100%;
				height: 200rpx;
			}
		}
	}
	
}
.maskback{
		background-color: rgba(160, 160, 160, 0.85);
		position: absolute;
		// bottom: 80rpx;//需要变为动态
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		.centerwrite{
			position: absolute;
			top: 20%;
			left: 10%;
			// transform:  translateY(-);
			width: 80%;
			z-index: 1000;
			background-color: #b2b2b2;
			display: flex;
			justify-content: center;
			align-items: center;
			.centeryellow{
				background-color: #1c9c36;//变为动态
				border-radius: 20rpx;
				text-align: center;
				color: #fff;
			}
		}
		.bottomall{
			position: absolute;
			bottom: 10%;
			left: 40%;
			width: 100%;
			z-index: 1000;
			.bottomred{
				width: 20%;
				height: 150rpx;
				background-color: #ff3f0a;
				border-radius: $uni-border-radius-circle;
				display: flex;
				justify-content: center;
				align-items: center;
				.img{
					width: 80rpx;
					height: 80rpx;
				}
			}
			
		}
		.bottomtext{
			color: #fff;
			position: absolute;
			width: 100%;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
	}
	.mapcomtent{
		width: 100%;
		height: 200rpx;
		overflow: hidden;
	}
	
	.frienddetailimg{
		width: 110%;
		height: 110%;
		position: absolute;
		left: -10rpx;
		top: -10rpx;
		z-index: 0;
		filter: blur(14px);
		opacity: 0.5;
	}

</style>
